<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head lang="en">
		<meta charset="UTF-8">
		<title>数据页</title>
	</head>
	<body>
		<div class="row">
			<div class="container">
				<div class="col-sm-6 col-md-3" th:each="book:${bookList}" style="border-radius: 30px">
					<div class="thumbnail" style="border-radius: 30px; background-color: #e1e2c2">
						<a href="details.html" th:href="@{/book/detail(id=${book.id})}"><img src="/static/images/beiwei78.jpg" th:src="@{'/images/' + ${book.imgUrl}}" alt="通用的占位符缩略图"></a>
						<div class="caption" style="display: grid; grid-template-areas:'header header' 'blank price' 'info writer';">
							<h3 th:classappend="h3-height" th:text="${book.name}" style="grid-area: header">北纬78°</h3>
							<div th:classappend="p-height" style="grid-area: price">
								价格:<span th:text="${book.newPrice}">19.5</span>元
							</div>
							<div th:classappend="p-height" style="grid-area: writer">
								作者:<span th:text="${book.author}">陈丹燕</span>
							</div>
							<p style="grid-area: info">
								<a href="details.html" th:href="@{/book/detail(id=${book.id})}">
									更多信息
								</a>
							</p>
						</div>
					</div>
				</div>
			</div>

			<!--分页-->
			<div class="container">
				<ul class="pager">
					<li th:classappend="${cur == 1} ? 'disabled' : ''">
						<a th:style=" ${cur == 1} ? 'pointer-events:none;background-color:#e1e2c2;':'background-color:#e1e2c2;'" href="javascript:void(0)" th:onclick="|loadData(${pre},${category})|">&larr;上一页</a>
					</li>
					<li th:classappend="${cur == last} ? 'disabled' : ''" >
						<a th:style="${cur == last} ? 'pointer-events:none;background-color:#e1e2c2;color:#05728e':'background-color:#e1e2c2;'" href="javascript:void(0)" th:onclick="|loadData(${next},${category})|">下一页 &rarr;</a>
					</li>
				</ul>
			</div>
		</div>
	</body>

</html>